<!DOCTYPE html>
<html lang="zh">

<head>
	<meta charset="UTF-8">
	<title>苏萌萌个人主页</title>
	<link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
	<meta name="viewport"
		content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<link rel="stylesheet" href="swiper-4.5.0/dist/css/swiper.min.css">
	<link rel="stylesheet" type="text/css" href="css/normalize.css" />
	<link rel="stylesheet" href="css/an-skill-bar.css">
	<link rel="stylesheet" href="css/main.css">
	<link rel="stylesheet" href="css/style.css">
</head>

<body>
	<!-- 返回顶部 -->
	<div id="q"></div>
	<div id="w"><img src="img/shangjiantou.png" alt=""></div>
	<div id="e"><img src="img/fankui.png" alt=""></div>
	<div id="r"><img src="img/shibo.png" alt=""></div>


	<nav class="navbar navbar-expand-lg navbar-light bg-light">
		<div class="container">
			<a class="navbar-brand" href="#">Wild girl</a>
			<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
				aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
				<span class="navbar-toggler-icon"></span>
			</button>

			<div class="collapse navbar-collapse" id="navbarSupportedContent">

				<form class="form-inline my-2 my-lg-0">
					<ul class="navbar-nav mr-auto">
						<li class="nav-item active">
							<a class="nav-link" href="#">首 页 <span class="sr-only">(current)</span></a>
						</li>
						<li class="nav-item">
							<a class="nav-link" href="#jineng"> 技 能<span class="sr-only">(current)</span></a>
						</li>
						<li class="nav-item">
							<a class="nav-link" href="#zhuanye">专业 <span class="sr-only">(current)</span></a>
						</li>
						<li class="nav-item">
							<a class="nav-link" href="#jingyan">经 验 <span class="sr-only">(current)</span></a>
						</li>
						<li class="nav-item">
							<a class="nav-link" href="#zhizuo">作品集 <span class="sr-only">(current)</span></a>
						</li>
						<li class="nav-item">
							<a class="nav-link" href="#lianxi">联系我 <span class="sr-only">(current)</span></a>
						</li>
					</ul>
				</form>
			</div>
		</div>
	</nav>

	<div class="container-fluid">
		<div class="row banner">
			<div class="col-md-6 banner1">
				<img src="img/geren.png" alt="">
			</div>
			<div class="col-md-6 banner2">
				<p class="p1">WELCOME TO MY WEBSITE</p>
				<p class="p2">Hello everyone, my name is <span>Su Mengmeng</span>, a web front-end programmer.</p>
				<p class="p3">本人苏萌萌，性格开朗、稳重、有活力，待人热情、真诚。工作认真负责，积极主动，能吃苦耐劳，家乡泊头，座右铭：今日事，今日毕，一份努力，一分收获；天下没有不可能的事，只要你有信心
					fighting！！！！</p>
				<!-- <span class="p4">LEARN MORE</span> -->
				<span class="p4">学 到 更 多</span>
			</div>
		</div>
	</div>

	<div class="container-fluid" id="jineng">
		<div class="row main1">
			<div class="col-md-6 main1-1">
				<p class="web1">web前端</p>
				<p class="web2">web前端工程师介绍</p>
				<p class="web3">
					Web前端开发工程师，主要职责是利用(X)HTML/CSS/JavaScript/Flash等各种Web技术进行客户端产品的开发。完成客户端程序（也就是浏览器端）的开发，开发JavaScript以及Flash模块，同时结合后台开发技术模拟整体效果，进行丰富互联网的Web开发，致力于通过技术改善用户体验。
				</p>
			</div>
			<div class="col-md-3 main1-2">
				<img src="img/jieshao.png" alt="">
			</div>
			<div class="col-md-3 main1-3">
				<p class="web4">我的技能</p>
				<p class="web5">Photoshop.HTML CSS JS.Web Design</p>
				<div class="skill">
					  <div class="skillbar html">
						<div class="filled" data-width="90%"></div>
						<span class="title">HTML</span>
						<span class="percent">90%</span>
					  </div>
				  
					  <div class="skillbar css">
						<span class="title"></i> CSS</span>
						<span class="percent">90%</span>
						<div class="filled" data-width="90%"></div>
					  </div>
				  
					  <div class="skillbar js">
						<span class="title">JS</span>
						<span class="percent">70%</span>
						<div class="filled" data-width="70%"></div>
					  </div>
					  <div class="skillbar Vue">
						<span class="title">Vue</span>
						<span class="percent">40%</span>
						<div class="filled" data-width="40%"></div>
					  </div>
				</div>
			</div>
		</div>
	</div>
	<div class="container-fluid" id="zhuanye">
		<div class="row zhuanye">
			<div class="col-md-3 zhuanye-1">
				<img src="img/专业-1.png" alt="">
				<p class="zhuanye-1-1">Html5 Css3</p>
				<p class="zhuanye-1-2">Phasellus vulputate tellus nec tortor varius elementum.Curabitur at pulvinar
					ante.</p>
			</div>
			<div class="col-md-3 zhuanye-2">
				<img src="img/专业-2.png" alt="">
				<p class="zhuanye-1-1">JavaScript</p>
				<p class="zhuanye-1-2">Curabitur at pulvinar ante.Duis dui urna,faucibus eget felis eu,iaculis congue
					sem.</p>
			</div>
			<div class="col-md-3 zhuanye-3">
				<img src="img/专业-3.png" alt="">
				<p class="zhuanye-1-1">jQuery</p>
				<p class="zhuanye-1-2">Mauris convallis eros massa,vitae euismod arcu tempus ut.Quisque viverra iaulis.
				</p>
			</div>
			<div class="col-md-3 zhuanye-4">
				<img src="img/专业-4.png" alt="">
				<p class="zhuanye-1-1">Vue</p>
				<p class="zhuanye-1-2">Mauris convallis eros massa,vitae euismod arcu tempus ut.Quisque viverra iaculis.
				</p>
			</div>
		</div>
	</div>
	<div class="container-fluid" id="jingyan">
		<div class="row main2">
			<div class="col-md-6 main2-1">
				<img src="img/geren-1.png" alt="">
			</div>
			<div class="col-md-6 main2-2">
				<p class="jingyan-1">实 战 经 验..</p>
				<p class="jingyan-2">Previous companies and my tasks</p>
				<div class="jingyan">
					<div class="jingyan1">
						<!-- <img src="img/jingyan.png" alt=""> -->
						<div class="jingyan1-1">
							<p class="jingyan1-1-1">2019.07 - 2019.08</p>
							<p class="jingyan1-1-2">泊头市惠鑫超市</p>
							<p class="jingyan1-1-3">(售卖员)介绍东西给客人，清点物品，搬运商品，收银，记账。</p>
						</div>
					</div>
					<div class="jingyan2">
						<!-- <img src="img/jingyan.png" alt=""> -->
						<div class="jingyan1-2">
							<p class="jingyan1-2-1">2019.08 - 2019.09</p>
							<p class="jingyan1-2-2">泊头市正新鸡排 </p>
							<p class="jingyan1-2-3">（制作，售卖）制作与售卖，清晨打扫卫生，宣传。</p>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="container-fluid" id="zhizuo">
		<div class="row main3">
			<div class="col-md-6 main3-1">
				<p class="zhizuo-1">我 的 制 作..</p>
				<p class="zhizuo-2">Phase II, Phase III, some pages produced, website</p>
				<div class="zhizuo">
					<div class="container">
						<a href="https://su-mengmeng.gitee.io/qqyinyue/"><img class="img1" src="img/1.jpg" height="100"
								width="100" alt=""></a>
						<a href="http://su-mengmeng.gitee.io/duitang/"><img class="img2" src="img/2.jpg" height="100"
								width="100" alt=""></a>
						<a href="http://su-mengmeng.gitee.io/tengxunwang/"><img class="img3" src="img/3.jpg"
								height="100" width="100" alt=""></a>
						<a href="http://su-mengmeng.gitee.io/repute/"><img class="img4" src="img/4.jpg" height="100"
								width="100" alt=""></a>
						<a href="http://su-mengmeng.gitee.io/hengwang/"><img class="img5" src="img/5.jpg" height="100"
								width="100" alt=""></a>
					</div>
				</div>
			</div>
			<div class="col-md-6 main3-2">
				<img src="img/jiaoyu.png" alt="">
			</div>
		</div>
	</div>
	<div id="main4" class="container-fluid main41" style="background-position: 50% 20px;">
		<div class="main4-1"></div>
		<div class="container">
			<div class="row main4-2">
				<div class="col-md-12 main4-2-1">
					<img src="img/wujiaoxing.png" alt="">
					<h2>Proin lobortis eu diam et facilisis. Fusce nisi nibh, molestie in vestibulum quis, auctor et
						orci.</h2>
					<p>Curabitur at pulvinar ante. Duis dui urna, faucibus eget felis eu, iaculis congue sem.</p>
				</div>
			</div>
		</div>
	</div>
	<div class="container-fluid" id="lianxi">
		<div class="row footer">
			<div class="col-md-6 footer1">
				<p class="footer1-1">Say hello..</p>
				<p class="footer1-2">Welcome everyone to leave their contact information.</p>
				<div class="footer1-3">
					<input type="text" id="footer1-3-1" class="form-control" name="fullname" placeholder="Your Name">
				</div>
				<div class="footer1-3">
					<input type="text" id="footer1-3-1" class="form-control" name="fullname" placeholder="Your Email">
				</div>
				<div class="footer1-3" data-wow-delay="1.4s"
					style="visibility: visible; animation-delay: 1.4s; animation-name: fadeInUp;">
					<textarea name="message" id="message" class="form-control" rows="5"
						placeholder="Write your message..." style="width: 650px; height: 48px;"></textarea>
				</div>
				<div class="footer1-4 col-md-6">
					<!-- <input id="submit" class="form-control" name="submit" type="submit" value="Send"> -->
					<button>Send</button>
				</div>
			</div>
			<div class="col-md-3 foote2">
				<img src="img/lianxi.png" alt="">
			</div>
			<div class="col-md-3 footer3">
				<p class="footer3-1">Visit my office</p>
				<p class="footer3-2">456 New Street 22000, New York City, USA</p>
				<p class="footer3-3">Contact me</p>
				<p class="footer3-4"><img src="img/shouji.png" alt=""><a href="#"> 155-3280-2517</a></p>
				<p class="footer3-5"><img src="img/youxiang.png" alt=""><a href="#"> 3398788893@qq.com</a></p>
				<p class="footer3-6"><img src="img/diqiu.png" alt=""><a href="#"> company.co</a></p>
			</div>
		</div>
	</div>
	<div class="container-fluid">
		<div class="footer2">
			<div class="row">
				<div class="col-md-12">
					<p>Design by：苏文建 备案号：湘ICP备14011335号-2</p>
					<ul class="ul1 col-md-3">
						<li><img src="img/banquan1.png" alt=""></li>
						<li><img src="img/banquan2.png" alt=""></li>
						<li><img src="img/banquan3.png" alt=""></li>
						<li><img src="img/banquan4.png" alt=""></li>
						<li><img src="img/banquan5.png" alt=""></li>
					</ul>
				</div>
			</div>

		</div>
	</div>




	<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.slim.min.js"></script>
	<script src="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
	<script src="https://cdn.bootcss.com/popper.js/1.14.7/umd/popper.min.js"></script>
	<script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>
	<script src="js/an-skill-bar.js"></script>
	<script src="js/main.js"></script>
	<script src="js/script.js"></script>

<!-- 
	<div style="text-align:center;clear:both;">
		<script src="/gg_bd_ad_720x90.js" type="text/javascript"></script>
		<script src="/follow.js" type="text/javascript"></script>
		</div> -->
</body>

</html>